<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>tab test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="tab.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id ="content">
	<div id = "nav">
		<ul>
			<li><a href = "#">行业介绍</a></li>
			<li><a href = "#">公司介绍</a></li>
			<li><a href = "#">新闻内容</a></li>
		</ul>
	</div>
	<div id = "hyjs" class="hydt">
		<ul>
		<li> <a href = "#">北京市建筑装饰协会职称评审......</a></li>
		<li> <a href = "#">北装协举办工程技术人员高级职....</a></li>
		<li> <a href = "#">热烈庆祝北装协培训中心双井分....</a></li>
		</ul>
	</div>
	<div id = "gsjs" class="hydt" style="display:none">
		<ul>
		<li><a href = "#">人间真爱——失独家庭赠送北京大龙..</a></li>
		<li><a href = "#">挑战自我 熔炼团队 开拓进取......</a></li>
		<li><a href = "#">北京房地集团有限公司启动援尼....</a></li>
		</ul>
	</div>
	<div id = "xwnr" class="hydt" style="display:none">
		<ul>
		<li><a href = "#">不要看说了什么 看做了什么......</a></li>
		<li><a href = "#">说到做到 不放空泡..............</a></li>
		<li><a href = "#">今天天气很晴朗.................</a></li>
		</ul>
	</div>
	
</div>

<script>
	var xy = document.getElementById("nav").getElementsByTagName("li");
		for(var i=0;i<xy.length;i++){
			xy[i].order = i;
			//alert(xy[i].order);
			addEvent(xy[i],"mouseover",move);
		}
	
	function move(){		
		var xy = document.getElementById("nav").getElementsByTagName("li");
		for(var i=0;i<xy.length;i++){
			xy[i].style.backgroundColor="#F0E68C";
			xy[i].style.borderTop="solid 5px #757575";//灰色
		}
		//alert(this);
		this.style.backgroundColor="#FFBBFF";	
		this.style.borderTop="solid 5px #A2C247 ";//绿色
		if(this.order==0){
			document.getElementById("hyjs").style.display="";
			document.getElementById("xwnr").style.display="none";
			document.getElementById("gsjs").style.display="none";
		}
		
		if(this.order==1){
			document.getElementById("xwnr").style.display="none";
			document.getElementById("gsjs").style.display="";
			document.getElementById("hyjs").style.display="none";
		}
		
		if(this.order == 2){
			document.getElementById("xwnr").style.display="";
			document.getElementById("gsjs").style.display="none";
			document.getElementById("hyjs").style.display="none";
		}
	
	}
		
	function addEvent(el, type, fn) {
				if(window.addEventListener) {
					el.addEventListener(type, fn, false);
				}else if(window.attachEvent) {
					el.attachEvent('on' + type, fn);
				}
	}
</script>
</body>
</html>